<template>
  <div class="searchAll">
    <!-- 搜索框 -->
    <div class="search">
      <van-cell-group inset>
        <van-icon name="arrow-left" class="backIco" size="6vw" @click="back" />
        <van-field
          v-model="searchData.name"
          center
          left-icon="search"
          clearable
          placeholder="搜索商品"
        >
          <template #button>
            <van-button size="small" style="{color: #000;}" @click="searchBtn">搜索</van-button>
          </template>
        </van-field>
        <van-icon name="weapp-nav" />
      </van-cell-group>
    </div>
    <main>
      <div class="history">
        <h3>历史记录</h3>
        <van-button round size="mini" class="clear" @click="clearBtn">清空历史</van-button>
        <ul class="historylist">
          <li v-for="item in historyList" :key="item">
            <van-button size="mini" round type="default" @click="checkShop(item)">{{ item }}</van-button>
          </li>
        </ul>
      </div>
    </main>
  </div>
</template>

<script setup>
import {ref} from 'vue'
import { useRouter } from 'vue-router';
import {getSearchShopApi} from '@/server'
const router=useRouter()
// 搜索数据
const searchData=ref({
  project_id:'1',
  name:'',
  limit:999
})
// 搜索记录数组
const historyList=ref([])
const searchInfo=JSON.parse(localStorage.getItem('searchInfo'))
historyList.value=searchInfo
historyList.value=[...new Set(historyList.value)]
// 返回上一级
const back=()=>{
  router.back()
}
// 搜索
const searchBtn=async ()=>{
  let params=searchData.value
  let res=await getSearchShopApi({...params})
  localStorage.setItem('searchList',JSON.stringify(res.data.result.rows))
  if(searchData.value.name){
    historyList.value.push(searchData.value.name)
  }
  localStorage.setItem('searchInfo',JSON.stringify(historyList.value))
  router.push('/SearchInfo')
}
// 历史记录搜索
const checkShop=(name)=>{
  searchData.value.name=name
  searchBtn()
}
// 清空历史记录
const clearBtn=()=>{
  historyList.value=[]
}
</script>

<style lang="scss" scope>
.searchAll{
  width: 100vw;
  box-sizing: border-box;
  width: 100vw;
  padding-top: 2.6667vw;
  // background-color: gainsboro;
  .search{
    height: 13.3333vw;
    border-bottom: 1px solid #f4f4f8;
    background-color: #fff;
    .van-cell-group{
      display: flex;
      align-items: center;
      justify-content: space-around;
      margin: 0;
      .backIco{
        margin-right: 2vw;
      }
      .van-cell{
        width: 80vw;
        background-color: #f4f4f8;
        padding: 1vw 1vw 1vw 2vw;
        .van-button{
          background-color: #f4f4f8;
          border: none;
        }
      }
    }
  }
  main{
    position: relative;
    .history{
      .clear{
        position: absolute;
        top: 0;
        right: 0;
      }
      .historylist{
        // display: flex;
        // flex-wrap: wrap;
        margin: 2.6667vw auto;
        width: 96vw;
        height: 53.3333vw;
        background-color: gainsboro;
        border-radius: 2.6667vw;
        li{
          margin: .5vw .7vw;
          display: inline-block;
        }
      }
    }
  }
}
</style>
